<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-menu"></i>{{$route.name}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <div class="handle-box">
        <el-button type="success" icon="search" @click="addFilm">添加电影</el-button>
      </div>
      <div>
        <el-table :data="film" border fit>
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="电影海报">
            <template slot-scope="scope">
              <img :src="ip+scope.row.poster_url" style="width:50%;height:50%" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="电影名称">
          </el-table-column>
          <el-table-column prop="create_at" :formatter="date_format" label="发布时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="put(scope.row)">编辑</el-button>
              <el-button @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <div class="excel">
          <div style="float:left;">
            <el-upload class="upload-demo" :action="location" :data="upload" :before-upload="beforeUpload" :on-success="success" :show-file-list="false">
              <el-button size="small " type="primary ">点击上传</el-button>
            </el-upload>
          </div>
          <div style="float:left;margin-left:20px; ">
            <el-button size="small " @click="do_exportFilm ">导出电影</el-button>
          </div>
        </div>
        <div>
          <el-pagination @current-change="handleCurrentChange " :current-page="num " layout="total, prev, pager, next, jumper " :total="totalElements ">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { allFilm, delFilm, exportFilm } from '../../api/server.js'
import { time_format } from '../../utils/date.js'
import { mapActions } from 'vuex'
import { ip } from '../../utils/local.js'
export default {
  data() {
    return {
      film: [],
      num: 1,
      totalElements: 10,
      location: `${process.env.API_ROOT}/bk/importMovieInfo`,
      upload: {},
      ip: ip
    }
  },
  created() {
    this.getAllfilm(1, 10)
  },
  methods: {
    ...mapActions(['saveFilm', 'clearFilm']),
    addFilm() {
      this.clearFilm()
      this.$router.push({
        path: '/filmAdd'
      })
    },
    handleCurrentChange(val) {
      console.log('val', val)
      this.num = val
      this.getAllfilm(val, 10)
    },
    getAllfilm(page, pageSize) {
      allFilm({ page, pageSize })
        .then(res => {
          console.log('电影列表', res)
          this.film = res.result
          this.totalElements = res.resultNum
        })
    },
    date_format(row) {
      if (row.create_at)
        return time_format(row.create_at, 'yyyy-MM-dd hh:mm:ss')
    },
    put(row) {
      this.saveFilm(row)
      this.$router.push({
        path: '/filmAdd'
      })
    },
    del(movie_id) {
      delFilm({ movie_id })
        .then(res => {
          this.$message.success('删除成功')
          this.getAllfilm(1, 10)
        })
    },
    do_exportFilm() {
      this.$http({
        method: 'get',
        url: `${process.env.API_ROOT}/bk/downloadMovieExcel`,
        // url: '/bk/downloadMovieExcel',
        responseType: 'blob',
        headers: {
          "Content-Type": 'application/x-www-form-urlencoded',
          "Access-Control-Allow-Origin": '*',
          "Access-Control-Allow-Headers": "Authorization,Origin, X-Requested-With, Content-Type, Accept",
          "Access-Control-Allow-Methods": "GET,POST"
        }
      }).then(res => {
        // exportFilm().then(res => {
        console.log('res111', res)
        let blob = res.data
        let fileName = this.getDate() + '.xls'
        let link = document.createElement('a')
        link.download = fileName
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        document.body.appendChild(link)
        link.click()
        URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
      }, err => console.log('err', err))
      // exportFilm()
      //   .then(res => {
      //     console.log('res', res)
      //   })
    },
    beforeUpload(file) {
      console.log('file', file)
      this.upload.file = file
    },
    getDate() {
      let date = new Date()
      let mon = date.getMonth() + 1
      if (mon < 10) {
        mon = '0' + mon
      }
      let day = date.getDate()
      if (day < 10) {
        day = '0' + day
      }
      return date.getFullYear() + '-' + mon + '-' + day
    },
    success(res) {
      if (res.code === '000000') {
        this.$message.success('上传成功')
      } else {
        this.$message.error(res.message)
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}
.excel {
  float: left;
}

.block {
  text-align: center;
  margin-top: 1%;
}
</style>